import { computed, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { diff } from "../../library/arrayUtil";
import { getParents, getNode } from "../../library/treeUtil";
import { useAppStore } from "../../store/app";
import { useUserStore } from "../../store/user";
import { layer } from "@layui/layui-vue";
//import { menus } from "./menu";

export function useMenu() {
    const route = useRoute();
    const router = useRouter();
    const appStore = useAppStore();
    const userStore = useUserStore();
    const selectedKey = ref(route.path);
    const openKeys = ref<string[]>([]);
    const isAccordion = computed(() => appStore.accordion);
    //const menusData = computed(() => menus);
    const menus = userStore.userMenu

    watch(route, () => {
        selectedKey.value = route.fullPath;
        const andParents = getParents(menus, route.fullPath);
        if (andParents && andParents.length > 0) {
            let andParentKeys = andParents.map((item: any) => item.id);
            if (isAccordion.value) {
                openKeys.value = andParentKeys;
            } else {
                openKeys.value = [...andParentKeys, ...openKeys.value];
            }
        }
    }, { immediate: true })

    watch(selectedKey, () => {
        let se = selectedKey.value;
        if (se !== 'undefined')
            router.push(se);
    })

    function changeSelectedKey(key: string) {
        var node = getNode(menus, key);
        if (node.type && node.type == "modal") {
            layer.open({
                type: "iframe",
                content: node.id,
                area: ['80%', '80%'],
                maxmin: true
            });
            return;
        }

        if (node.type && node.type == "blank") {
            window.open(node.id, "_blank");
            return;
        }
        selectedKey.value = key;
    }

    function changeOpenKeys(keys: string[]) {
        const addArr = diff(openKeys.value, keys);
        if (keys.length > openKeys.value.length && isAccordion.value) {
            var arr = getParents(menus, addArr[0]);
            openKeys.value = arr.map((item: any) => {
                return item.id;
            })
        } else {
            openKeys.value = keys;
        }
    }

    function changeMainSelectedKey(key: string) {
        var node = getNode(menus, key);
        if (node.type && node.type == "modal") {
            layer.open({
                type: "iframe",
                content: node.id,
                area: ["80%", "80%"],
                maxmin: true,
            });
            return;
        }

        if (node.type && node.type == "blank") {
            window.open(node.id, "_blank");
            return;
        }
        selectedKey.value = key;
    }

    function changeOpenLayer(id: string) {
        layer.open({
            type: "iframe",
            content: id,
            area: ["80%", "80%"],
            maxmin: true,
        });
        return;
    }

    function changeModMenu(key: string) {
        switch (key) {
            case "/cms/content/list":
                appStore.modChange = "content"
                appStore.collapse = false
                break;
            case '/oas/doc/post/list':
                appStore.modChange = "doc"
                appStore.collapse = false
                break;
            default:
                appStore.modChange = "system"
        }
        selectedKey.value = key;
    }

    return {
        selectedKey, openKeys, changeOpenKeys, changeSelectedKey, changeMainSelectedKey, changeModMenu, changeOpenLayer, isAccordion, menus
    }
}